<template>
  <div class="nav-container" :class="{ 'search-mode': isSearchMode }">
    <!-- 默认导航栏 -->
    <div class="nav-bar">
      <div class="nav-items" ref="navItems">
        <div 
          class="nav-indicator" 
          :style="{
            width: `${indicatorWidth}px`,
            left: `${indicatorLeft}px`
          }"
        ></div>
        <a 
          v-for="(item, index) in navItems" 
          :key="index"
          href="#" 
          class="nav-item" 
          :class="{ active: activeIndex === index }"
          @click.prevent="switchTab(index)"
        >
          {{ item }}
        </a>
      </div>
      <div class="search-trigger" @click="activateSearch">
        <i class="el-icon el-icon-search"></i>
      </div>
    </div>
    
    <!-- 搜索栏 -->
    <div class="search-bar">
      <input 
        type="text" 
        class="search-input" 
        placeholder="搜索TA的作品"
        ref="searchInput"
        v-model="searchQuery"
        @keyup.enter="handleSearch"
      >
      <button class="search-action" @click="handleSearch">搜索</button>
      <button class="search-cancel" @click="deactivateSearch">取消</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PublisherBanner',
  props: {
    publisherName: {
      type: String
    }
  },
  data() {
    return {
      isSearchMode: false,
      activeIndex: 0,
      searchQuery: '',
      indicatorWidth: 0,
      indicatorLeft: 0,
      navItems: ['全部']
    }
  },
  mounted() {
    this.updateIndicator();
    window.addEventListener('resize', this.updateIndicator);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateIndicator);
  },
  methods: {
    switchTab(index) {
      this.activeIndex = index;
      this.updateIndicator();
      console.log(`切换到: ${this.navItems[index]}`);
    },
    updateIndicator() {
      this.$nextTick(() => {
        const activeTab = this.$refs.navItems.querySelector('.active');
        if (activeTab) {
          this.indicatorWidth = activeTab.offsetWidth;
          this.indicatorLeft = activeTab.offsetLeft;
        }
      });
    },
    activateSearch() {
      this.isSearchMode = true;
      this.$nextTick(() => {
        this.$refs.searchInput.focus();
      });
    },
    deactivateSearch() {
      this.isSearchMode = false;
      this.searchQuery = '';
    },
    handleSearch() {
      if (this.searchQuery.trim()) {
        // console.log('搜索内容:', this.searchQuery);
        // console.log(this.publisherName);

        this.$api.serviceNews.post('api/news/searchPublisherNews', 
        {userName: this.publisherName, keyWord: this.searchQuery}, {
          headers: { 'Content-Type': 'application/json' }
        })
        .then(response => {
          console.log(response.data.data);
        })
        .catch(error => {
          console.error('登录失败:', error.response?.data || error.message);
        });      
        }
      this.isSearchMode = false;
    }
  }
}
</script>

<style scoped>
.nav-container {
  width: 746px;
  background-color: #fff;
  /* box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); */
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}

.nav-bar {
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s ease;
}

.nav-items {
  display: flex;
  gap: 20px;
  position: relative;
}

.nav-item {
  font-size: 15px;
  color: #333;
  text-decoration: none;
  position: relative;
  padding: 4px 0;
  transition: all 0.3s;
  z-index: 1;
  white-space: nowrap;
}

.nav-item:hover {
  color: #ff4d4f;
}

.nav-item.active {
  color: #ff4d4f;
  font-weight: 500;
}

.nav-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background-color: #ff4d4f;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 0;
}

.search-trigger {
  font-size: 16px;
  color: #666;
  cursor: pointer;
  transition: color 0.3s;
  display: flex;
  align-items: center;
}

.search-trigger:hover {
  color: #ff4d4f;
}

.search-trigger i {
  font-size: 18px;
}

.search-mode .nav-bar {
  transform: translateY(-100%);
}

.search-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  gap: 8px; /* 使用gap替代margin */
  background-color: white;
  transform: translateY(-100%);
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.search-mode .search-bar {
  transform: translateY(0);
}

.search-input {
  flex: 1 1 calc(100% - 125px); /* 增加35px宽度 */
  height: 36px;
  padding: 0 15px;
  margin-right: 20px;
  border: 1px solid #ddd;
  border-radius: 0;
  font-size: 15px;
  outline: none;
  transition: all 0.3s;
  min-width: 0;
}

.search-input:focus {
  border-color: #ff4d4f;
}

.search-input::placeholder {
  color: #999;
}

.search-action {
  flex: 0 0 80px; /* 固定宽度 */
  height: 36px;
  background-color: #ff4d4f;
  color: white;
  border: none;
  border-radius: 2px;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s;
}

.search-action:hover {
  background-color: #ff2d2f;
}

.search-cancel {
  flex: 0 0 80px; /* 固定宽度 */
  height: 36px;
  background-color: transparent;
  color: #666;
  border: none;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s;
  white-space: nowrap;
}

.search-cancel:hover {
  color: #333;
}

.el-icon {
  padding-top: 8px;
}
</style>